<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>角色权限配置</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="/static/super_cmdb/css/font.css">
        <link rel="stylesheet" href="/static/super_cmdb/css/xadmin.css">
    </head>
    <body>
    <div class="x-body layui-anim layui-anim-up">

        <fieldset class="layui-elem-field">
            <legend style="color:#1AA093;">配置角色: {{ role_info.name }} 权限</legend>
            <div>
                <div class="layui-form-item"></div>
                <div class="layui-form-item">
                  <div class="layui-input-inline" style="width: 1100px">
                      <th style="width: 35px;"><input type="checkbox" onclick="CheckAllToggle(this)" />全选</th>
                      <hr>
                      <label>
                          {% for key,url_dict in url_json.items %}
                              <li>
                                <h4 style="font-weight: bold">{{ key }} 权限</h4>
                                {% for url,name in url_dict.items %}
                                    <span style="width: 160px;display: block">
                                        {% if url in current_role_permissions_list %}
                                            <input checked="checked" type="checkbox" tag="obj_checkbox" id="permissions" name="permissions" value="{{ url }}" > {{ name }}
                                        {% else %}
                                             <input type="checkbox" tag="obj_checkbox" id="permissions" name="permissions" value="{{ url }}" > {{ name }}
                                        {% endif %}
                                    <span/>
                                {% endfor %}
                              </li>
                              <Hr>
                          {% endfor %}
                      </label>

                  </div>
                </div>

            </div>
        </fieldset>
        <div style="width: 318px;height: 100px">
            <div style="padding-left: 162px">
                <button id="click" class="layui-btn" lay-filter="setting" lay-submit="">
                  配置
                </button>
            </div>

        </div>
    </div>
    <script type="text/javascript" src="/static/super_cmdb/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/super_cmdb/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/super_cmdb/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/super_cmdb/js/jquery.cookie.js"></script>
    <script>
        //checkbox 操作
        function CheckAllToggle(ele){
            if ( $(ele).prop("checked") ){
                $("input[tag='obj_checkbox']").prop("checked",true);
            }else {
                $("input[tag='obj_checkbox']").prop("checked",false);
            }
        }

        $(function () {
            $.ajaxSetup({
                beforeSend:function (xhr,settings) {
                    xhr.setRequestHeader("X-CSRFtoken",$.cookie("csrftoken"));
                }
            })
        });

        layui.use(['form','layer'], function(){
            $ = layui.jquery;
            var form = layui.form
            ,layer = layui.layer;

            form.on('submit(setting)', function(data){
              //发异步，把数据提交给后端
                var url = "/super_cmdb/role_permissions_setting-{{ role_info.id }}/";

                //获取选中checkbox的值
                var permissions_obj = document.getElementsByName("permissions");
                var permissions_list = [];
                for(k in permissions_obj){
                    if(permissions_obj[k].checked)
                        permissions_list.push(permissions_obj[k].value);
                }
                $.ajax({
                        url: url,
                        type: "POST",
                        traditional:true,  //加上此项可以传数组
                        data: {
                            "permissions_list": permissions_list,
                        },
                        success: function (data) {
                            alert(data.message);
                        }
                    });
            });

        });
    </script>
    </body>
</html>